<template>
  <div class="app-container">
    <!-- 页面标题和操作栏 -->
    <div class="page-header">
      <h1>短剧热度趋势分析</h1>
      <div class="action-bar">
        <el-button type="primary" @click="refreshData" :loading="loading">
          <i class="el-icon-refresh"></i> 刷新数据
        </el-button>
        <el-button @click="exportData">
          <i class="el-icon-download"></i> 导出报告
        </el-button>
        <el-select v-model="timeRange" placeholder="时间范围" style="width: 120px;">
          <el-option label="近7天" value="7"></el-option>
          <el-option label="近30天" value="30"></el-option>
          <el-option label="近90天" value="90"></el-option>
        </el-select>
      </div>
    </div>

    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="overview-cards">
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-content">
            <div class="stats-icon drama-icon">
              <i class="el-icon-video-play"></i>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ overview.totalDramas }}</div>
              <div class="stats-label">短剧总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-content">
            <div class="stats-icon view-icon">
              <i class="el-icon-view"></i>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ overview.totalViews }}</div>
              <div class="stats-label">总观看量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-content">
            <div class="stats-icon hot-icon">
              <i class="el-icon-fire"></i>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ overview.avgHotness }}</div>
              <div class="stats-label">平均热度指数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-content">
            <div class="stats-icon trend-icon">
              <i class="el-icon-data-line"></i>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ overview.growthRate }}%</div>
              <div class="stats-label">增长率</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 可视化图表 -->
    <el-row :gutter="20" class="chart-row">
      <!-- 1. 短剧热度趋势图 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span>短剧热度趋势</span>
            <el-tooltip content="展示短剧热度随时间的变化趋势" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </div>
          <div id="hotnessTrendChart" class="chart-container" style="height: 400px;"></div>
        </el-card>
      </el-col>

      <!-- 2. 短剧类型分布图 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span>短剧类型分布</span>
            <el-tooltip content="展示不同类型短剧的分布情况" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </div>
          <div id="typeDistributionChart" class="chart-container" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <!-- 3. 热门短剧排行榜 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span>热门短剧排行榜</span>
            <el-tooltip content="展示当前热门短剧排名" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </div>
          <div id="popularDramasChart" class="chart-container" style="height: 400px;"></div>
        </el-card>
      </el-col>

      <!-- 4. 短剧热度与观看量关系图 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span>热度与观看量关系</span>
            <el-tooltip content="展示短剧热度与观看量的相关性" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </div>
          <div id="hotnessViewsChart" class="chart-container" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 加载状态 -->
    <el-dialog
      :visible.sync="loading"
      title="数据加载中"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div style="text-align: center;">
        <el-progress type="circle" :percentage="loadProgress"></el-progress>
        <p style="margin-top: 20px;">正在加载可视化数据...</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'DramaTrendAnalysis',
  data() {
    return {
      loading: false,
      loadProgress: 0,
      timeRange: '7',
      charts: {},
      overview: {
        totalDramas: 156,
        totalViews: '2.3M',
        avgHotness: 78.5,
        growthRate: 12.3
      },
      chartData: {
        hotnessTrend: [
          { date: '2023-06-01', hotness: 65 },
          { date: '2023-06-02', hotness: 68 },
          { date: '2023-06-03', hotness: 72 },
          { date: '2023-06-04', hotness: 70 },
          { date: '2023-06-05', hotness: 75 },
          { date: '2023-06-06', hotness: 78 },
          { date: '2023-06-07', hotness: 82 }
        ],
        typeDistribution: [
          { name: '都市情感', value: 35 },
          { name: '古装剧', value: 25 },
          { name: '悬疑推理', value: 20 },
          { name: '青春校园', value: 15 },
          { name: '其他', value: 5 }
        ],
        popularDramas: [
          { name: '都市爱情故事', hotness: 95, views: 320000 },
          { name: '穿越时空的爱恋', hotness: 92, views: 280000 },
          { name: '校园青春回忆', hotness: 88, views: 250000 },
          { name: '古风侠客行', hotness: 85, views: 220000 },
          { name: '悬疑案件簿', hotness: 82, views: 190000 }
        ],
        hotnessViews: [
          { hotness: 95, views: 320000, name: '都市爱情故事' },
          { hotness: 92, views: 280000, name: '穿越时空的爱恋' },
          { hotness: 88, views: 250000, name: '校园青春回忆' },
          { hotness: 85, views: 220000, name: '古风侠客行' },
          { hotness: 82, views: 190000, name: '悬疑案件簿' },
          { hotness: 78, views: 160000, name: '职场风云' },
          { hotness: 75, views: 140000, name: '家庭伦理剧' },
          { hotness: 70, views: 120000, name: '历史传奇' }
        ]
      }
    }
  },
  mounted() {
    this.initCharts()
    this.loadData()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    Object.values(this.charts).forEach(chart => {
      if (chart) chart.dispose()
    })
  },
  methods: {
    initCharts() {
      this.$nextTick(() => {
        this.charts.hotnessTrend = echarts.init(document.getElementById('hotnessTrendChart'))
        this.charts.typeDistribution = echarts.init(document.getElementById('typeDistributionChart'))
        this.charts.popularDramas = echarts.init(document.getElementById('popularDramasChart'))
        this.charts.hotnessViews = echarts.init(document.getElementById('hotnessViewsChart'))
        
        this.renderHotnessTrendChart()
        this.renderTypeDistributionChart()
        this.renderPopularDramasChart()
        this.renderHotnessViewsChart()
      })
    },
    
    loadData() {
      this.loading = true
      this.loadProgress = 0
      
      // 模拟数据加载
      const interval = setInterval(() => {
        this.loadProgress += 10
        if (this.loadProgress >= 100) {
          clearInterval(interval)
          this.loading = false
          // 实际项目中这里会调用API获取数据
          // this.fetchData()
        }
      }, 100)
    },
    
    renderHotnessTrendChart() {
      const data = this.chartData.hotnessTrend
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: data.map(item => item.date)
        },
        yAxis: {
          type: 'value',
          name: '热度指数'
        },
        series: [{
          data: data.map(item => item.hotness),
          type: 'line',
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(255, 99, 132, 0.5)' },
              { offset: 1, color: 'rgba(255, 99, 132, 0.1)' }
            ])
          },
          itemStyle: {
            color: '#ff6384'
          }
        }]
      }
      this.charts.hotnessTrend.setOption(option)
    },
    
    renderTypeDistributionChart() {
      const data = this.chartData.typeDistribution
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: data.map(item => item.name)
        },
        series: [
          {
            name: '短剧类型',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      }
      this.charts.typeDistribution.setOption(option)
    },
    
    renderPopularDramasChart() {
      const data = this.chartData.popularDramas
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: data.map(item => item.name)
        },
        series: [
          {
            name: '热度指数',
            type: 'bar',
            data: data.map(item => item.hotness),
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            }
          }
        ]
      }
      this.charts.popularDramas.setOption(option)
    },
    
    renderHotnessViewsChart() {
      const data = this.chartData.hotnessViews
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return `${params.data.name}<br/>热度指数: ${params.data[0]}<br/>观看量: ${params.data[1]}`
          }
        },
        xAxis: {
          type: 'value',
          name: '观看量',
          nameLocation: 'middle',
          nameGap: 30,
          axisLabel: {
            formatter: function(value) {
              if (value >= 10000) {
                return (value / 10000).toFixed(1) + '万'
              }
              return value
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '热度指数',
          nameLocation: 'middle',
          nameGap: 30
        },
        series: [{
          type: 'scatter',
          symbolSize: function(data) {
            return Math.sqrt(data[1]) / 100
          },
          data: data.map(item => [item.views, item.hotness, item.name]),
          itemStyle: {
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              { offset: 0, color: 'rgba(251, 118, 123, 1)' },
              { offset: 1, color: 'rgba(204, 46, 72, 1)' }
            ])
          }
        }]
      }
      this.charts.hotnessViews.setOption(option)
    },
    
    // 交互功能
    refreshData() {
      this.loadData()
      this.$message.success('数据刷新成功')
    },
    
    exportData() {
      this.$message.info('导出功能开发中...')
    },
    
    handleResize() {
      Object.values(this.charts).forEach(chart => {
        if (chart) chart.resize()
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background: linear-gradient(135deg, #fef5e7 0%, #fdf6ec 100%);
  min-height: calc(100vh - 84px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-header h1 {
  margin: 0;
  color: #303133;
  font-size: 24px;
}

.action-bar {
  display: flex;
  gap: 10px;
}

.overview-cards {
  margin-bottom: 20px;
}

.stats-card {
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #ffffff 0%, #fef9f3 100%);
}

.stats-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.drama-icon { background: #9c27b0; }
.view-icon { background: #2196f3; }
.hot-icon { background: #ff5722; }
.trend-icon { background: #4caf50; }

.stats-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stats-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  border-radius: 8px;
  border: none;
  height: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #fef9f3 100%);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #303133;
}

.chart-container {
  width: 100%;
}
</style>